<script setup xmlns="http://www.w3.org/1999/html">
import {ChatDotRound, Search} from "@element-plus/icons-vue";
import {onMounted, ref} from 'vue'
import { useScroll } from '@vueuse/core'

const chat_message = ref(null)
const {x, y} = useScroll(chat_message, {behavior: "smooth"})
const currentFriend = ref(true)
const count = ref(30)
const message = ref('')

const load = () => {
  count.value += 2
}
const userList = ref([])
const messageList = ref([])
onMounted(() => {
  for (let i = 0; i < 20; i++) {
    userList.value.push({
      avatar: "https://guli-file-ysc.oss-cn-beijing.aliyuncs.com/2024/01/16/0140fb6d-9eea-44f3-8837-b5539004a1b8test.jpg",
      message: "走在路上的少年：[动画表情]",
    })
    messageList.value.push({
      avatar: "https://guli-file-ysc.oss-cn-beijing.aliyuncs.com/2024/01/16/0140fb6d-9eea-44f3-8837-b5539004a1b8test.jpg",
      message: "走在路上的少年：[动画表情]",
    })
  }
  chat_message.value.scrollTop = chat_message.value.scrollHeight - chat_message.value.clientHeight
})

const sendMsg = () => {
  messageList.value.push({
    avatar: "https://guli-file-ysc.oss-cn-beijing.aliyuncs.com/2024/01/16/0140fb6d-9eea-44f3-8837-b5539004a1b8test.jpg",
    message: message.value
  })
  message.value = null
  chat_message.value.scrollTop = chat_message.value.scrollHeight - chat_message.value.clientHeight
}

</script>

<template>
  <el-card class="body" style="width: 1300px;height: 850px">
    <el-row>
      <el-col class="left aside-col" :span="1">
        <el-avatar size="default"
                   src="https://guli-file-ysc.oss-cn-beijing.aliyuncs.com/2024/01/16/0140fb6d-9eea-44f3-8837-b5539004a1b8test.jpg"/>
        <div class="aside-div">
          <el-icon @click="currentFriend=true" class="aside-icon">
            <ChatDotRound/>
          </el-icon>
        </div>
        <div class="aside-div">
          <el-icon @click="currentFriend=false" class="aside-icon">
            <Avatar/>
          </el-icon>
        </div>
      </el-col>

      <el-col style="text-align: center;" :span="6">
        <span>
          <el-input
              style="width: 200px"
              placeholder="搜索"
              :prefix-icon="Search"
          />
        </span>
        <span style="margin-left: 10px;width: 50px;height: 50px;border-radius: 5px;">
          <el-icon>
            <Plus/>
          </el-icon>
        </span>
        <div style="margin-top: 10px;overflow: auto;"/>
        <div class="user-friend" style="">
          <div v-for="(u, i) in userList" :key="i">
            <el-card style="border-radius: 0px"
                     :style=" i % 20 ===0?'background-color: #0099ff':''" shadow="never">
              <el-row>
                <el-col :span="4">
                  <el-avatar size="default" :src="u.avatar"/>
                </el-col>
                <el-col :span="18">
                  <el-row style="font-size: 15px">
                    江南咸鱼群
                  </el-row>
                  <el-row style="margin-top: 5px" class="small-font">
                    {{ u.message }}
                  </el-row>
                </el-col>
                <el-col :span="2">
                  <el-row class="small-font">
                    15:05
                  </el-row>
                  <el-row style="margin-top: 10px;margin-left: 5px" class="small-font">
                    <div style="background-color: #cccccc;width: 15px;border-radius: 10px">
                      <span style="color: #f9fafc">85</span>
                    </div>
                  </el-row>
                </el-col>
              </el-row>
            </el-card>
          </div>
        </div>
      </el-col>

      <el-col :span="16" style="">
        <el-container style="width: 1000px;">
          <el-header style="width: 100%;height: 42px;">
            江南咸🐟群
          </el-header>
          <el-main v-scrollBottom style="background-color: #e9e9e9;margin-top: 0px;height: 600px;" ref="chat_message">
            <div style="background-color: #e9e9e9;border-radius: 0px;margin-right: 75px;margin-top: -15px"
                 v-for="(m, i) in messageList" :key="i" shadow="never">
              <div style="margin-top: 40px">
                <el-row>
                  <el-col :span="2">
                    <el-avatar size="default"
                               :src="m.avatar"/>
                  </el-col>
                  <el-col :span="22" style="margin-left: -20px">
                    <el-row style="font-size: 15px;color: #9c9c9c">
                      YSC-OxB
                    </el-row>
                    <el-row style="margin-top: 5px;font-size: 15px;">
                      <div
                          style="background-color: white;border-radius: 8px;display: flex;justify-content: center;align-items: center;max-width: 350px;min-height: 40px">
                        <span style="">
                          <span class="no-select">&nbsp;&nbsp;</span>{{m.message}}<span class="no-select">&nbsp;&nbsp;</span>
                        </span>
                      </div>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div style="background-color: #e9e9e9;border-radius: 0px;margin-right: 95px;margin-top: -15px;text-align: right;"
                 v-for="(m, i) in messageList" :key="i" shadow="never">
              <div style="margin-top: 40px;display: inline-block">
                <el-row>
                  <el-col :span="22" style="">
                    <el-row style="font-size: 15px;color: #9c9c9c;justify-content: right;margin-right: 10px">
                      YSC-OxB
                    </el-row>
                    <el-row style="margin-top: 5px;font-size: 15px;">
                      <div
                          style="background-color: white;border-radius: 8px;display: flex;justify-content: center;align-items: center;max-width: 350px;min-height: 40px">
                        <span style="">
                          <span class="no-select">&nbsp;&nbsp;</span>{{m.message}}<span class="no-select">&nbsp;&nbsp;</span>
                        </span>
                      </div>
                    </el-row>
                  </el-col>
                  <el-col :span="2">
                    <el-avatar size="default"
                               :src="m.avatar"/>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-main>
          <el-footer style="background-color: #e9e9e9;margin-top: 0px;height: 190px">
            <el-row style="margin-left: -20px;margin-top: 15px">
              <el-input
                  style="width: 907px;max-height: 180px;"
                  :autosize="{ minRows: 5, maxRows: 5 }"
                  type="textarea"
                  resize="none"
                  @keydown.enter="sendMsg"
                  v-model="message"
              />
            </el-row>
            <el-button @click="sendMsg" style="margin-top: 10px;float: right;margin-right: 100px" type="primary">发送</el-button>
          </el-footer>
        </el-container>
      </el-col>
    </el-row>


  </el-card>
</template>

<style scoped>
.body {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}

.left {
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
}

.aside-icon {
  font-size: 30px;
  margin-top: 10px;
}

.aside-div {
  background-color: #e9e9e9;
  height: 50px;
  width: 50px;
  border-radius: 10px;
  margin-top: 10px;
}

.aside-col {
  text-align: center;
  margin-left: -5px;
  margin-right: 10px
}

.small-font {
  font-size: 10px;
  color: #cccccc;
}

.user-friend {
  height: 790px;
  overflow: auto;
}

.user-friend::-webkit-scrollbar {
  width: 0px;
}

.no-select {
  user-select: none;
}
</style>